<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07- 非父子组件通信</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <my-a></my-a>
    <my-b></my-b>
    <my-c></my-c>

</div>

<template id="a">
    <div>
        <h3>A组件：{{name}}</h3>
        <button @click="send">将数据发送给C组件</button>
    </div>
</template>

<template id="b">
    <div>
        <h3>B组件：{{age}}</h3>
        <button @click="send">将数组发送给C组件</button>
    </div>
</template>

<template id="c">
    <div>
        <h3>C组件：{{name}}，{{age}}</h3>
    </div>
</template>
<template id="hello">

</template>


<script>
    //定义一个空的Vue实例
    var Event = new Vue();

    var A = {
        template: '#a',
        data() {
            return {
                name: 'tom'
            }
        },
        methods: {
            send() {
                Event.$emit('data-a', this.name);
            }
        }
    }
    var B = {
        template: '#b',
        data() {
            return {
                age: 20
            }
        },
        methods: {
            send() {
                Event.$emit('data-b', this.age);
            }
        }
    }
    var C = {
        template: '#c',
        data() {
            return {
                name: '',
                age: ''
            }
        },
        mounted() { //在模板编译完成后执行
            Event.$on('data-a', name => {
                this.name = name;
                // console.log(this);
            });

            Event.$on('data-b', age => {
                this.age = age;
            });
        }
    }

    let vm = new Vue({ //父组件
        el: "#app",
        components: {
            'my-a': A,
            'my-b': B,
            'my-c': C
        }

    })
</script>
</body>
</html>